<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css">
    <title>Document</title>
</head>

<body>
    <div class="prism-player" id="J_prismPlayer" style="width: 852px; height: 480px;margin-left: 20%;"></div>
    <script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    <!-- 阿里云视频播放器组件 -->
    <script charset="utf-8"
        src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
    <script>
        /* 弹幕组件集成了 CommentCoreLibrary 框架, 更多 Api 请查看文档 https://github.com/jabbany/CommentCoreLibrary/ */
        var danmukuList = [{
            "mode": 1,
            "text": "哈哈",
            "stime": 1000,
            "size": 25,
            "color": 0xffffff
        }, {
            "mode": 1,
            "text": "前方高能",
            "stime": 2000,
            "size": 25,
            "color": 0xff0000
        }, {
            "mode": 1,
            "text": "灵魂歌手",
            "stime": 30000,
            "size": 25,
            "color": 0xff0000
        }, {
            "mode": 1,
            "text": "顺手一划",
            "stime": 10000,
            "size": 25,
            "color": 0x00c1de
        }];
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            //播放配置
            //播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
            // source: 'http://fenggge19.gulionline.shop/customerTrans/6486fbaca38f2754b4b4694ca0596bb7/77a020f-17b15e92f21-0006-9fde-3bc-3c468.mp4',
            //播放方式二：加密视频和多数据源视频的播放
            vid: '98084a8be19d44bbaa51bebcfd339677',
            // playauth: 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNVdOS09yTnUrcEd4SmlnTkV2WWprME5ZcmRJbWEvUm1qejJJSDVFZW5OcUF1d2F2Lzh5bEd0VDZQZ1psck1xRzhFWkd4YWFNNW9zczh3S3JGei9KcExGc3QySjZyOEpqc1ZPcHNwSzBsbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRUJ5RUd5RWNQSDZwd3FTUFZqK0U1TG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHphVTVJaHphNkx2TlhLRkVjS0FnNVdlMlBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZDEwMVJuWGh4eUdWR29BQlhYQVJac1lpdVV0YXpRUFlLUUpZanJ2cmZKZ1dmdUJZcVNxNEJ0dE02bktRcWQxcjJpOUdrMjFFTmpEUm9uVGx2ZUxDbG52ZERLT251MG9zcEljeHEwZE9HYTl4QkI5all3MDFBZ2lvNVRVSXBCWTZPc2NQbnFvWXlEbkMvYitXYkgrQzhPd2ZxclFJMy82cmxpL0hRcDAxY1VobHZaTjByUlFURDlUa1ZHOD0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJqb3ZKdlEzYUFSK2hER3hMSWhSNThidlFJQy95OWhRUnp4MDl6TW1ld2h4SFltWlQyYWtxb3g0Wmx3MDVTRGpVckFxa2lhWElqRWtyZkltRHEzRWZtMTNUZk10VkVBazhLdjJZRklZbUZNUT1cIixcIkNhbGxlclwiOlwib3dZdFgyZTJvUjIwUHovdlhVdjlyWFlFMitWOENkeVRETGFpSTRCRThEZz1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjEtMDgtMDVUMTE6MTE6MzNaXCIsXCJNZWRpYUlkXCI6XCI5ODA4NGE4YmUxOWQ0NGJiYWE1MWJlYmNmZDMzOTY3N1wiLFwiUGxheURvbWFpblwiOlwiZmVuZ2dnZTE5Lmd1bGlvbmxpbmUuc2hvcFwiLFwiU2lnbmF0dXJlXCI6XCIxOURBL0doRE95K2pCYTFjZ0Y5cTdGTUxHMGM9XCJ9IiwiVmlkZW9NZXRhIjp7IlN0YXR1cyI6Ik5vcm1hbCIsIlZpZGVvSWQiOiI5ODA4NGE4YmUxOWQ0NGJiYWE1MWJlYmNmZDMzOTY3NyIsIlRpdGxlIjoi5Yqg5a+GLm1wNCIsIkNvdmVyVVJMIjoiaHR0cDovL2ZlbmdnZ2UxOS5ndWxpb25saW5lLnNob3AvaW1hZ2UvY292ZXIvRDZEMjQyRjU1RkE5NEI3RDgxQTNBNTE2NDY5MEM0NzAtNi0yLnBuZyIsIkR1cmF0aW9uIjoxNi4yNzY3fSwiQWNjZXNzS2V5SWQiOiJTVFMuTlY4Y1B5VjVnc1pLNm1pak1Ybjhkdmp6eCIsIlBsYXlEb21haW4iOiJmZW5nZ2dlMTkuZ3VsaW9ubGluZS5zaG9wIiwiQWNjZXNzS2V5U2VjcmV0IjoiSkFCVDdjdHFwdnQ3ckJ6eDh0R2NZdHJ4dXBTZTFzdGRKVUJqR0hNOFhUVUIiLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE4NjQ2MjY2OTQ1MDU1NzZ9',
            playauth: 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWJNSSs2RmxKbE94SXFaVDNDQXBuRUNlTGhZMjdmRWtUejJJSDVFZW5OcUF1d2F2Lzh5bEd0VDZQZ1psck1xRzhFWkd4YWFNNW9zczh3S3JGei9KcExGc3QySjZyOEpqc1VtdUlsSjBsbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRUJ5RUd5RWNQSDZwd3FTUFZqK0U1TG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHphVTVJaHphNkx2TlhLRkVjS0FnNVdlMlBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZDEwMVJuWGh4eUdWR29BQkM2MDhDU3R0QTVYMGVRbDVlQ3NDNm55N0RDbDNjLzdjUk9BRHpmZHhsU0hidzdVZjZFSjhHSFdRck51QmQ2dzMyeDZJTVdUbGVYNXVJQmx1RTUxYURmUm96MDlNZXlqTjUyckJ5SGxNaUlSSDBiUzlnQlU4d2dJMHRIbTFXSVE3ODgwZzZPRUpwYis4WGtIQVczaWdtZTlUV3NDVExuWnFGNUFZT0ZsOEMrST0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJqb3ZKdlEzYUFSK2hER3hMSWhSNThidlFJQy95OWhRUnp4MDl6TW1ld2h4SFltWlQyYWtxb3g0Wmx3MDVTRGpVckFxa2lhWElqRWtyZkltRHEzRWZtMTNUZk10VkVBazhLdjJZRklZbUZNUT1cIixcIkNhbGxlclwiOlwib3dZdFgyZTJvUjIwUHovdlhVdjlyWFlFMitWOENkeVRETGFpSTRCRThEZz1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjEtMDgtMDVUMTI6MTA6NTVaXCIsXCJNZWRpYUlkXCI6XCI5ODA4NGE4YmUxOWQ0NGJiYWE1MWJlYmNmZDMzOTY3N1wiLFwiUGxheURvbWFpblwiOlwiZmVuZ2dnZTE5Lmd1bGlvbmxpbmUuc2hvcFwiLFwiU2lnbmF0dXJlXCI6XCJISFNjV0xZanI1am8vOWI5azVXbU9ocDB3YkE9XCJ9IiwiVmlkZW9NZXRhIjp7IlN0YXR1cyI6Ik5vcm1hbCIsIlZpZGVvSWQiOiI5ODA4NGE4YmUxOWQ0NGJiYWE1MWJlYmNmZDMzOTY3NyIsIlRpdGxlIjoi5Yqg5a+GLm1wNCIsIkNvdmVyVVJMIjoiaHR0cDovL2ZlbmdnZ2UxOS5ndWxpb25saW5lLnNob3AvaW1hZ2UvY292ZXIvRDZEMjQyRjU1RkE5NEI3RDgxQTNBNTE2NDY5MEM0NzAtNi0yLnBuZyIsIkR1cmF0aW9uIjoxNi4yNzY3fSwiQWNjZXNzS2V5SWQiOiJTVFMuTlV5aFQxeUZvc0hyTVYxQnFXdDd0NHJvcyIsIlBsYXlEb21haW4iOiJmZW5nZ2dlMTkuZ3VsaW9ubGluZS5zaG9wIiwiQWNjZXNzS2V5U2VjcmV0IjoiQ2FDc0hOcWFqdkJ0WllLcHJHcnBhekozd0Z3WVhnRWlXZHBpSDQzU0dpZXMiLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE4NjQ2MjY2OTQ1MDU1NzZ9',
            encryptType: 1, //当播放私有加密流时需要设置。
            cover: 'http://fenggge19.gulionline.shop/image/cover/D6D242F55FA94B7D81A3A5164690C470-6-2.png',
            // components: [{
            //     name: 'BulletScreenComponent', // 跑马灯组件
            //     type: AliPlayerComponent.BulletScreenComponent,
            //     /** 跑马灯组件三个参数 text, style, bulletPosition
            //        * text: 跑马灯文字内容
            //        * style: 跑马灯样式
            //        * bulletPosition: 跑马灯位置, 可选的值为 'top' (顶部), 'bottom' (底部), 'random' (随机), 不传值默认为 'random'
            //        */
            //     args: ['欢迎来到谷粒学院', { fontSize: '16px', color: '#00c1de' }, 'random']
            // }]
            // components: [{
            //     name: 'AliplayerDanmuComponent', // 弹幕组件
            //     type: AliPlayerComponent.AliplayerDanmuComponent,
            //     args: [danmukuList] //列表：注意需要外层的[ ]
            // }]
            components: [{
                name: 'RotateMirrorComponent',
                type: AliPlayerComponent.RotateMirrorComponent
            }]
        },
            function (player) {
                console.log('播放器创建好了。')
            });
    </script>
</body>

</html>